<template>
    <div id="searchNav" :class="isRed()?'isActive':''" @click="changePage">
        {{title}}
      <van-tag v-if="isFirst" plain type="danger">new</van-tag>
    </div>
</template>

<script>
    export default {
        name: "searchNav",
      props:{
        title:String,
        id:Number,
        url:String,
        isFirst:Boolean
      },
      computed:{
        lang:{
          get(){
            return this.$store.getters.getLang;
          },
          set(){}
        }
      },
      methods: {
        isRed(){
          if(this.$store.getters.getLastCurrentPageText===this.title){
            return true;
          }else {
            return false;
          }
        },
        changePage() {
          if(this.url==='/')
          {
            this.$store.dispatch('toChangeProductIndexId', this.id);
            this.$store.dispatch('toChangeAboutUsOrOurProductsId', this.id);
            if(this.$store.getters.getNowPage==='/'){
              this.getJson();
              this.$store.dispatch('toChangeCurrentPageText', this.title);
            }
          }else{
            this.$store.dispatch('toChangeAboutUsOrOurProductsId', this.url);
            this.$store.dispatch('toChangeCurrentPageText', this.title);
          }
          this.$router.push(this.url);
          this.$store.dispatch('toChangeNowPage',this.url);
          this.$store.dispatch('toChangeSearchPopup');
        },
        getJson(){
          let _this=this;
          this.$store.dispatch('toChangeLoadIngVisible',true);
          this.axios.get(domain.url+'product/api/get_product', {
            params: {
              id:_this.id,
              language:_this.lang,
              equipment:'mobile'
            }
          })
            .then(function (response) {
              _this.$store.dispatch('toChangeProductInfo',response.data);
              _this.$store.dispatch('toChangeLoadIngVisible',false);
            })
            .catch(function (error) {
              console.log(error);
            });
        },
      }
    }
</script>

<style scoped>
#searchNav{
  width:100%;
  height:60px;
  border-bottom: 1px solid #e8e8e8;
  color:#000000;
  line-height: 60px;
  padding-left:10px;
}
.isActive{
  color:#e96f72 !important;
}
  #searchNav .van-tag{
    position: absolute;
    margin-top: 7px;
    margin-left: 4px;
  }
</style>
